<!DOCTYPE html>
<html>

	<head lang="en">
		<meta charset="UTF-8">
		<title>我的购物车</title>
		<link rel="stylesheet" href="css/shopping.css">
	</head>

	<body>
		<section id="shopping">
			<div id="cart" onmouseover="over()" onmouseout="out()">我的购物车<span>1</span></div>
			<div id="cartList">
				<h2>最新加入的商品</h2>
				<ul>
					<li><img src="image/makeup.jpg"></li>
					<li>倩碧经典三部曲套装（液体皂200ml+明肌2号水200ml+润肤乳125ml）</li>
					<li>¥558.00×1<br/>删除</li>
				</ul>
				<div class="footer">共1件商品<span>共计¥558.00</span> <span>去购物车</span></div>
			</div>
		</section>
		<script>
			/*document.getElementById("cartList").style.display="none";
			    function over(){
			        document.getElementById("cart").style.backgroundColor="#ffffff";
			        document.getElementById("cart").style.zIndex="100";
			        document.getElementById("cart").style.borderBottom="none";
			        document.getElementById("cartList").style.display="block";
			        document.getElementById("cartList").style.position="relative";
			        document.getElementById("cartList").style.top="-1px";
			    }
			    function out(){
			        document.getElementById("cart").style.backgroundColor="#f9f9f9";
			        document.getElementById("cart").style.borderBottom="solid 1px #dcdcdc";
			        document.getElementById("cartList").style.display="none";
			    }*/

			function over() {
				document.getElementById("cart").className = "cartOver";
				document.getElementById("cartList").className = "cartListOver";
				//alert(document.getElementById("cartList").display);
				//alert(document.getElementById("cartList").currentStyle.display);  //使用currentStyle获取属性值
				/*使用getComputedStyle获取属性值
				var cartList=document.getElementById("cartList");
				alert(document.defaultView.getComputedStyle(cartList,null).display);*/
			}

			function out() {
				document.getElementById("cart").className = "cartOut";
				document.getElementById("cartList").className = "cartListOut";
			}
		</script>
	</body>

</html>